<template>
	<!-- 我的车辆 -->
	<view class='main'>
		<view class="container">
			<view v-for="(item,index) in carInfo" :key="index" @click="switchoverCar()">
				<uni-card :title="item.licensePlateNumber" v-model="item.defaultCarId" :extra="item.title"
					:is-shadow="false" :border="false" >
					<text class="uni-body">车型：{{item.carType}}</text><br>
					<text class="uni-body">车主：{{item.carOwner}}</text>
				</uni-card>
			</view>
		</view>
		<view class="bottom-style" style="position: absolute; bottom: 40px">
			<button type="primary" class="button-style" @click="addchezhu()">添加车辆，升级为车主</button>
		</view>
	</view>
</template>

<script>
	export default {
		data( ) {
			return {
				userId: 'user101',
				carInfo: {},
			}
		},
		created( ) {
			this.getCarInfo( )
		},
		methods: {
			// 切换默认车辆和备用车辆
			switchoverCar( index ) {
				if ( index == 0 ) {
					index = 1
				} else if ( index == 1 ) {
					index = 0
				}
			},
			// 跳转到车主注册页面
			addchezhu( ) {
				uni.navigateTo( {
					url: '/pages/mine/car-owner'
				} )
			},
			// 获取车辆信息
			async getCarInfo( ) {
				const result = await uni.$http.get( "localhost:8096/driverCar/getDriverCarInfo/" + this.userId )
				const {
					data,
					code
				} = result.data
				if ( code == 0 ) {
					this.carInfo = result.data.data1
					console.log( this.carInfo )
					// console.log( result.data.data1[ 0 ] )
					for ( var i = 0; i < this.carInfo.length; i++ ) {
						if ( this.carInfo[ i ].defaultCarId == 0 ) {
							this.carInfo[ i ].title = "当前默认车辆"
						} else {
							this.carInfo[ i ].title = "备用车辆"
						}
					}
				} else if ( code == 1 ) {
					uni.showToast( {
						title: "信息填写错误，请检查填写信息",
						icon: 'error',
						duration: 1000
					} );
				}
			}
		}
	}
</script>

<style>
	// 最大父容器
	main {
		/* display: flex;
		flex-direction: column;
		min-height: 100%; */
	}

	// 中间内容区域
	.container {
		flex: 1;
		width: 100%;
		overflow-y: scroll;
	}

	/* 注册车主按钮 */
	.button-style {
		margin: 0 auto;
		width: 80%;
		border-radius: 35px;
		background-color: blue;
	}

	/* 底部子容器 */
	.bottom-style {
		align-self: flex-end;
		width: 100%;
		padding-top: 10px;
		margin-bottom: 0px;
		/* background-color: white; */
	}
</style>